@config.main("Home") {
    <div class="body-box">

        <div class="index-box">
            <div class="index-left">

                <h3>Introduction</h3>
                <p style="font-size: 16px">Alfalfa (<i>Medicago sativa </i>L.) is a versatile and valuable crop that has been cultivated for
                    over 2,000 years. As a perennial flowering plant in the legume family, Fabaceae, it is also known as
                    lucerne and is widely grown as a forage crop for livestock. Originally native to Europe and Asia, it
                    is now grown in many parts of the world, including the United States, Canada, Australia, and South Africa.
                    It is a highly nutritious plant that is rich in protein, minerals, and vitamins. This feature have allowed
                    it to be cultivated in many parts of the world, making it a valuable crop for farmers and consumers alike.
                    The accumulation of multidimensional and multi-omics data for alfalfa has been made possible by recent
                    advancements in high-throughput techniques. The integration of this information holds great potential to
                    expedite genetic research and facilitate advancements in alfalfa agronomic traits. To this goal, we have
                    developed a comprehensive database named MODMS, which incorporates multiple reference genomes, annotations,
                    comparative genomics, transcriptomes, high-quality genetic variants, proteomics, and metabolomics.</p>

                <hr>
                <form class="form-inline" autocomplete="off" action="/alfalfa/all/searchPage" method="get">
                    <div class="input-group" style="width: 100%">
                        <input type="text" name="input" class="form-control"
                        required placeholder="e.g.ko03021 NAM" id="input" autocomplete="off"/>
                        <span class="input-group-btn">
                            <button class="btn my-btn" type="submit"
                            style="border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px">Search</button>
                        </span>
                    </div>
                    <span   style=" margin-left: 1%;text-align: left">
                        e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                        example</em></a></span>
                </form>

                <hr>

            </div>

            <div class="index-right" style="
                height: 100%;
                padding-left: 20px">
                <div>
                    <img src="/assets/images/banner.jpg" style="width: 88%;
                        border-radius: 10px;
                        margin-bottom: 10px" />
                </div>

            </div>

        </div>


        <div class="index-box">
            <div class="index-left" style="width: 100%">
                <h4>Portals</h4>
                <div class="left-box" style="flex-wrap: wrap">
                    @imgBoxPortals("Genomics","Genomics",routes.GenomeController.genomePage("ZMNO"),"This module is a tool designed for analyzing and interpreting genomic data. It collects four alfalfa varieties genome assemblies and one genome assembly of M. truncatula. ")
                    @imgBoxPortals("Transcriptomics","Transcriptomics",routes.ToolsController.toolsPage("geneExpressionPage"),"This module comprises 18 transcriptome datasets obtained from distinct tissues or subjected to different treatment conditions.")
                    @imgBoxPortals("Variation","Variation",routes.ToolsController.toolsPage("singleLocusPage"),"This module is designed to collect annotations of polymorphic variations, including SNPs, InDels, and SVs from populations of 200 individuals.")
                    @imgBoxPortals("Proteomics","Proteomics",routes.ProteomicsController.proteomicsPage(),"This module collected thirteen proteomics datasets from other research groups and provides the functionality to visualize the expression patterns of paralogs for selected genes at the protein level under different treatments. ")
                    @imgBoxPortals("Metabolomics","Metabolomics",routes.MetaController.mdSdPage(),"This module collected fourteen metabolomics datasets and provided a user-friendly portal that supports researchers in identifying differential metabolites among various conditions by inputting the treatments and the name of alfalfa varieties.")
                    @imgBoxPortals("gRNA","gRNA",routes.ToolsController.toolsPage("grnaPage"),"This module is an innovative tool that serves as a comprehensive platform for designing guide RNA (gRNA) sequences targeted to specific genes for gene editing.")
                </div>
            </div>
        </div>


        <div class="index-box">
            <div class="index-left" style="width: 100%">
                <h4>Tools</h4>
                <div class="left-box" style="justify-content: flex-start">
                    @imgBox("Blast", "exchange", routes.BlastController.blastPage())
                    @imgBox("Design Primer", "paypal", routes.ToolsController.toolsPage("primerPage"))
                    @imgBox("Enrichment", "gears", routes.ToolsController.toolsPage("enrichPage"))
                    @imgBox("Muscle", "share-alt", routes.ToolsController.toolsPage("musclePage"))
                    @imgBox("Lastz", "flask", routes.ToolsController.toolsPage("lastzPage"))
                    @imgBox("Genewise", "hourglass", routes.ToolsController.toolsPage("genewisePage"))
                </div>
            </div>
        </div>

        <div class="index-box">
            <div class="index-left" style="width: 100%">
                <h4>
                    How to cite us
                </h4>
                <div class="left-box" style="display: unset;margin-left: 20px">
                    <a href="https://doi.org/10.1093/hr/uhad245" target="_blank" style="color: #1F8597">Fang Longfa, Liu Tao, Li Mingyu, Dong Xueming, Han Yuling, Xu Congzhuo, Li Siqi, Zhang Jia, He Xiaojuan, Zhou Qiang, Luo Dong, Liu Zhipeng*. MODMS: a multi-omics database for facilitating biological studies on alfalfa (Medicago sativa L.). Horticulture Research, 2024, 11: 245</a>

                    <div style="padding-left: 20px;">Liu zhipeng  (<a style="color: #1F8597;padding: 2px 10px;border-radius: 3px; " href="http://caoye.lzu.edu.cn/lzupage/2009/12/07/N20091207181858.html" target="_blank">http://caoye.lzu.edu.cn/lzupage/2009/12/07/N20091207181858.html</a>) : <a target="_blank" href="mailto:lzp@@lzu.edu.cn">lzp@@lzu.edu.cn</a></div>
                    <div style="margin-top: 5px;padding-left: 20px;">fanglongfa (<a style=" color: #1F8597;padding: 2px 10px;border-radius: 3px; " href="http://caoye.lzu.edu.cn/lzupage/2020/09/14/N20200914173154.html" target="_blank">http://caoye.lzu.edu.cn/lzupage/2020/09/14/N20200914173154.html</a>) :  <a target="_blank" href="mailto:fanglf@@lzu.edu.cn">fanglf@@lzu.edu.cn</a></div>

                </div>
            </div>
        </div>

        <hr/>
        <footer>
            <div style="display: flex;align-items: center;margin-top: 10px">
                <div style="width: 30%">
                    Copyright©Liu lab and Fang lab, China.
                </div>
                <div style="width: 40%;display: flex">

                    <img src="/assets/images/logo1.png" style="height: 80px"/>
                    <img src="/assets/images/logo2.png" style="height: 80px"/>

                </div>
                @*
                <div style="width: 30%;text-align: left">
                <div style="font-weight: bold;font-size: 18px">Contact :</div>
                <div><a style="background-color: #5BC0DE;padding: 2px 10px;border-radius: 3px;color: white" href="http://caoye.lzu.edu.cn/lzupage/2009/12/07/N20091207181858.html" target="_blank">Liu zhipeng </a> : <a target="_blank" href="mailto:lzp@@lzu.edu.cn">lzp@@lzu.edu.cn</a></div>
                <div style="margin-top: 5px"><a style="background-color: #5BC0DE;padding: 2px 10px;border-radius: 3px;color: white" href="http://caoye.lzu.edu.cn/lzupage/2020/09/14/N20200914173154.html" target="_blank">fanglongfa</a> :  <a target="_blank" href="mailto:fanglf@@lzu.edu.cn">fanglf@@lzu.edu.cn</a></div>

                </div>
                *@


            </div>
        </footer>
    </div>




    <script>

            function showExample() {
                $("#input").val("ko03021 NAM")
            }

    </script>
}

    @imgBox(title: String, fa: String, href: Call) = {
    <a href="@href">
        <div class="img-box">
            <div class="img">
                <i class="fa fa-@fa"></i>

            </div>
            <p>@title</p>
        </div>
    </a>
}

@imgBoxPortals(title: String, fa: String, href: Call,text:String) = {
    <a href="@href">
        <div class="img-box-portals">
            <div class="img">
                <img src="/assets/images/@{fa}.png" />

            </div>
            <div class="portals-box">
                <h5>@title</h5>
                <p>@text</p>
            </div>
        </div>
    </a>

}

